<template>
  <div id="code-container" />
</template>

<script>
import { loginApi } from '@/api/api'

export default {
  data() {
    return {
      APPID: '',
      // APPID: 'wx25db18c5814dcebc',
      // redirect_uri: 'http://test-home-console.964yx.com/',
      redirect_uri: '',
      // redirect_uri: 'http://whlay.cn.utools.club/',
      href: 'data:text/css;base64,' + 'LmltcG93ZXJCb3ggLnFyY29kZSB7CiAgd2lkdGg6IDIyMXB4Owp9Ci5pbXBvd2VyQm94IC50aXRsZSB7CiAgZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAuaW5mbyB7CiAgd2lkdGg6IDIwMHB4Owp9Ci5zdGF0dXNfaWNvbiB7CiAgZGlzcGxheTogbm9uZTsKfQouaW1wb3dlckJveCAuc3RhdHVzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KLmltcG93ZXJCb3ggLmluZm8gcDpsYXN0LW9mLXR5cGUgewogIGRpc3BsYXk6IG5vbmU7Cn0='
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const res = await this.$request(loginApi.getWechatInfo)
      this.APPID = res.data.appId
      this.redirect_uri = res.data.redirectUri

      const _this = this
      new window.WxLogin({
        self_redirect: false,
        id: 'code-container',
        appid: _this.APPID,
        scope: 'snsapi_login',
        redirect_uri: encodeURIComponent(_this.redirect_uri + '#/login'),
        state: 'wechat',
        href: _this.href
      })
    }
  }
}
</script>

<style lang="scss">
#code-container {
  display: flex;
  justify-content: center;
}
iframe {
  height: 300px;
}
// 为解决外链css文件且存在白屏情况，通过以下base64编码来控制二维码样式，对应上面href。https://www.jb51.net/tools/base64.htm
// .impowerBox .qrcode {
//   width: 200px;
// }
// .impowerBox .title {
//   display: none;
// }
// .impowerBox .info {
//   width: 200px;
// }
// .status_icon {
//   display: none;
// }
// .impowerBox .status {
//   text-align: center;
// }
// #wx_default_tip:last-of-type {
//   display: none;
// }
</style>
